<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    // 响应式核心函数
    function defineReactive(obj, key, value) {
      // 对value进行更深层次的处理
      observe(value)
      Object.defineProperty(obj, key, {
        get: function reactiveGetter() {
          return value
        },
        set: function reactiveSetter(newVal) {
          value = newVal
        }
      })
    }

    // 对数据开始响应式操作
    function observe(obj) {
      // 判断是对象还是基本数据类型
      if (typeof obj !== "object" || obj === null) return 
        for (let key of Object.keys(obj)) {
          // 遍历对象后将对象中的每一个属性名交给defineReactive进行响应式处理
          defineReactive(obj, key, obj[key])
        }
    }

    const vm = {
      _data: {
        name: "laowang",
        count: 0,
        wea: {
          type: "下雨"
        },
        movie: [{
            nameOne: "独行月球"
          },
          {
            nameTwo: "夏洛特烦恼"
          }
        ]
      }
    }

    // 调用observe函数,让它帮我们进行响应式操作
    observe(vm._data)
  </script>
</body>

</html>